<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../dist/auto-drawing.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const { createCanvas, createGroup, renderCanvas } = AutoDrawing
      const zr = createCanvas('app')
      const gp = createGroup()
      const data = [
        {
          type: 'rect',
          zlevel: 0,
          x: 26,
          y: 76,
          width: 40,
          height: 50,
          fill: '#ff8041',
          stroke: '#ff8041',
          draggable: true
        },
        {
          type: 'text',
          zlevel: 0,
          x: 26,
          y: 76,
          rotation: 30,
          text: 'text',
          draggable: true
        },
        {
          type: 'line',
          zlevel: 0,
          x1: 96,
          y1: 100,
          x2: 104,
          y2: 100,
          stroke: '#f8f9b7',
          draggable: true
        },
        {
          type: 'line',
          zlevel: 0,
          x1: 100,
          y1: 96,
          x2: 100,
          y2: 104,
          stroke: '#f8f9b7',
          draggable: true
        },
        {
          type: 'sector',
          cx: 150,
          cy: 150,
          r: 100,
          r0: 0,
          startAngle: 0,
          endAngle: 90,
          fill: 'yellow',
          clockwise: true,
          draggable: true
        },
        {
          type: 'arc',
          cx: 300,
          cy: 150,
          r: 100,
          startAngle: 0,
          endAngle: 90,
          fill: 'green',
          clockwise: true,
          draggable: true
        },
        {
          type: 'polygon',
          points: [
            [350, 0],
            [500, 0],
            [350, 100]
          ],
          fill: 'red',
          stroke: 'none',
          draggable: true
        },
        {
          type: 'text',
          x: 100,
          y: 600,
          rotation: 30,
          text: '你好,我是文字',
          fontSize: 50,
          fontWeight: 400,
          draggable: true
        }
      ]
      gp.ondragstart = e => {
        console.log(e)
      }
      gp.ondrag = e => {
        console.log(e)
      }
      gp.ondragend = e => {
        console.log(e)
      }
      renderCanvas(zr, gp, data)
    </script>
  </body>
</html>
